<template>
  <div class="contain">
    <div class="nav">
      详情信息
      <div class="f_btn" @click="$router.go(-1)">
        <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>
        <span>返回</span>
      </div>
    </div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="tabs">
      <el-tab-pane label="合同信息" name="first">
        <div class="total">
          <div class="title">
            <div>分包合同信息</div>
            <div v-show="ms_roleName == 'ProjectClerk'">
              <span @click="flag=!flag">{{flag?'编辑':'取消'}}</span>
              <span @click="save">保存</span>
            </div>
          </div>
          <div class="tables">
            <table cellpadding="0" cellspacing="0" border="1">
              <tr>
                <td>合同名称</td>
                <td>
                  <el-input v-model="form.conName" :disabled="flag"></el-input>
                </td>
                <td>内部合同编号</td>
                <td>
                  <el-input v-model="form.conInnerno" :disabled="flag"></el-input>
                </td>
              </tr>
              <tr>
                <td>所属合同编号</td>
                <td>
                  <el-input v-model="form.parentOuterno" :disabled="flag"></el-input>
                </td>
                <td>所属合同</td>
                <td>
                  <el-input v-model="form.parentId" :disabled="flag"></el-input>
                </td>
              </tr>
              <tr>
                <td>分包合同号</td>
                <td>
                  <el-input v-model="form.conOuterno" :disabled="flag"></el-input>
                </td>
                <td>合同金额(万元)</td>
                <td>
                  <el-input v-model="form.conMoney" :disabled="flag"></el-input>
                </td>
              </tr>
              <tr>
                <td>项目部</td>
                <td>
                  <el-select
                    v-model="form.belongOrg"
                    :disabled="flag"
                    placeholder="请选择项目部"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in list1"
                      :key="index"
                      :value="item.orgId"
                      :label="item.orgName"
                    ></el-option>
                  </el-select>
                </td>
                <td>签订时间</td>
                <td>
                  <el-date-picker
                    v-model="form.signDate"
                    type="date"
                    placeholder="选择日期"
                    :disabled="flag"
                    clearable
                    value-format="timestamp"
                  ></el-date-picker>
                </td>
              </tr>
              <tr>
                <td>完工时间</td>
                <td>
                  <el-date-picker
                    v-model="form.finishDate"
                    type="date"
                    placeholder="选择日期"
                    :disabled="flag"
                    clearable
                    value-format="timestamp"
                  ></el-date-picker>
                </td>
                <td>合同折扣价(万元)</td>
                <td>
                  <el-input v-model="form.countPrice" :disabled="flag"></el-input>
                </td>
              </tr>
              <tr>
                <td>降点数</td>
                <td>
                  <el-input v-model="form.conDroppoint" :disabled="flag"></el-input>
                </td>
                <td style="height:50px">查看文件</td>
                <td style="height:50px">
                  <a
                    :href="LfileUrl"
                    :download="LfileName"
                    class="red"
                    style="margin-left:10px;"
                  >{{LfileName}}</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="项目清单" name="second" @click="second_frame">
        <div class="title">
          <div>项目信息</div>
          <div></div>
        </div>
        <div class="table">
          <el-table
            ref="multipleTable"
            :data="info"
            tooltip-effect="dark"
            style="width:100%"
            border
          >
            <el-table-column label="项目编号" align="center" width="200" prop="proNo"></el-table-column>
            <el-table-column label="项目名称" align="center" prop="proName"></el-table-column>
            <el-table-column label="项目进度" align="center" width="200" prop="proProgress"></el-table-column>
            <el-table-column label="项目金额" align="center" width="200" prop="money"></el-table-column>
            <el-table-column label="操作信息" align="center" width="200">
              <template slot-scope="scope">
                <a @click.prevent="detail(scope.row)" class="choose">查看详情</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->

        <div class="component-paging" v-if="info.length > 0">
          <div class="table-bottom">
            <div class="bottom-left">
            </div>
            <div class="paging">
              <div class="paging-left">
                <p>
                  共
                  <span>{{Math.ceil(total/pageSize)}}</span> 页/
                  <span>{{total}}</span> 条数据
                </p>
              </div>
              <el-pagination
                background
                @size-change="SizeChange($event,second_frame,currentPage,pageSize)"
                @current-change="CurrentChange($event,second_frame,currentPage,pageSize)"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30]"
                :page-size="pageSize"
                layout="sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      LfileUrl: "",
      LfileName: "",
      ms_roleName: localStorage.getItem("roleName"),
      form: {
        countPrice: 0
      },
      flag: true, //是否可编辑
      activeName: "first",
      info: [],
      multipleSelection: [], //全选
      total: 500,
      // 每页显示数据的条数
      pageSize: 10,
      // 当前显示的页面页码
      currentPage: 1,
      list1: []
    };
  },
  created() {
    this.getList();
    this.getXmb();
  },
  mounted() {},
  methods: {
    // 获取项目部的列表
    getXmb() {
      let that = this,
        suCb = res => {
          that.list1 = res.data.data;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/sysOrg/selectProjectOrg",
          methods: "post",
          data: {},
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },

    //项目清单-详情
    detail(row) {
      this.$router.push({
        name: "detailpro",
        params: {
          info: row.proId,
          tabs: "first"
        }
      });
    },

    //保存
    save() {
      let that = this,
        suCb = res => {
          console.log(res);
          that.$msg("保存成功");
          that.flag = true;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proContract/updateContractDetail",
          methods: "post",
          data: {
            proContract: {
              conId: that.$route.query.row,
              conOuterno: that.form.conOuterno,
              conInnerno: that.form.conInnerno,
              conName: that.form.conName,
              conMoney: that.form.conMoney + "",
              conDroppoint: that.form.conDroppoint + "",
              signDate: that.form.signDate + "",
              finishDate: that.form.finishDate + "",
              belongOrg: that.form.belongOrg
            }
          },
          success: suCb,
          error: erCb
        };
      if (!that.flag) {
        that.$https(req);
      } else {
        that.$erMsg("先编辑，再保存");
      }
    },
    //tab切换
    handleClick(tab, event) {
      if (tab.name == "second") {
        this.second_frame();
      } else {
        this.getList();
      }
    },
    // 获取合同信息列表
    getList() {
      let that = this,
        suCb = res => {
          console.log("分包合同信息", res);
          that.form = res.data.data.single;
          that.form.countPrice = that.form.conMoney - that.form.conMoney * that.form.conDroppoint || '';
          that.LfileUrl = img_url + res.data.data.files[0].fileUrl;
          that.LfileName = res.data.data.files[0].fileName;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proContract/viewDetails",
          methods: "post",
          data: { conId: that.$route.query.row },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },

    // 查看分包项目清单
    second_frame() {
      let that = this,
        suCb = res => {
          console.log(res);
          that.info = res.data.data.list;
          that.total = res.data.data.total;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proProject/selectProDetals",
          methods: "post",
          data: {
            conId: that.$route.query.row,
            pn: that.currentPage + "",
            psize: that.pageSize + ""
          },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    }
  }
};
</script>
<style scoped>
a {
  cursor: pointer;
}
.contain {
  box-sizing: border-box;
  width: 1100px;
  border: 1px solid #e4e4e4;
  margin: 20px auto;
}
.tabs {
  width: 1060px;
  margin: 20px;
  box-sizing: border-box;
}
.red {
  color: #48c9b0;
  font-size: 12px;
}
.nav {
  background: #f8f8f8;
  height: 50px;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 1px solid #e4e4e4;
  text-align: left;
  padding-left: 20px;
  font-size: 14px;
  color: #666;
}
.title {
  background: #f8f8f8;
  height: 50px;
  padding: 0 20px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
}
.title > div:first-of-type {
  float: left;
  color: #666;
  line-height: 50px;
}
.title > div:last-of-type {
  float: right;
}
.title > div:last-of-type span {
  display: inline-block;
  margin-left: 20px;
  padding: 5px 20px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 4px;
}
.title > div:last-of-type span:first-of-type {
  border: 1px solid #e4e4e4;
  color: #666;
  background: #fff;
}
.title > div:last-of-type span:last-of-type {
  border: 1px solid #1abc9c;
  color: #fff;
  background: #1abc9c;
}
.tables table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
}
.tables table td:nth-of-type(2n) {
  text-align: left;
}
.tables table td:nth-of-type(2n + 1) {
  text-align: right;
  padding-right: 20px;
  width: 160px;
  background: #f9fafc;
}
.choose {
  color: #1abc9c;
  padding: 0 5px;
}
.component-paging .table-bottom {
  width: 100%;
}
/* 返回按钮 */

.f_btn {
  display: inline-block;
  float: right;
  width: 80px;
  height: 30px;
  border: 1px solid #ccc;
  line-height: 30px;
  text-align: center;
  margin-top: 7px;
  margin-right: 10px;
}
.f_btn:hover {
  cursor: pointer;
  background-color: #f3f3f3;
}
</style>
